﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>叠加柱状图</title>
    <script src="/Content/Scripts/jquery-1.8.3.min.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts.js"></script>

    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '营养含量'
                },
                xAxis: {
                    categories: ['苹果', '橙子', '梨', '葡萄', '香蕉']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '营养含量'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -70,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            '总量: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: [{
                    name: '维生素A',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: '维生素B',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: '维生素C',
                    data: [3, 4, 4, 2, 5]
                }]
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
